<template>
  <div id="box" :class="modalClass" :element="element" :confirmBtn='confirmBtn' :cancelBtn="cancelBtn" :titleTxt="reminderTitle">
    <div id="content"  @click.stop="">
      <p class="close">
        <button class="closeWindow" @click="cancel">
          <svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>
        </button>
      </p>
      <p class="p1">
        <img src="../common/imgs/radiusGth.png" alt="">
      </p>
      <p class="p2">{{reminderTitle}}</p>
      <div class="html" v-html="reminderInfo"></div>
      <div class="btns">
        <button id="confirm" @click="callback">{{submitTxt}}</button>
        <button id="cancel" @click="cancel">{{cancelTxt}}</button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name : 'dangerDialog',
    data() {
      return {
        introduce: '危险提示弹窗',
        modalClass : 'modal-hide',
        reminderInfo: '',
        submitTxt: '',
        cancelTxt:'',
        reminderTitle : ''
      }
    },
    props: {
      'element': {/*提示内容*/
        type: String,
      },
      'confirmBtn': {/*确定按钮文字*/
        type: String,
      },
      'cancelBtn': {/*取消按钮文字*/
        type: String,
      },
      'titleTxt': {/*标题*/
        type: String,
      },
    },
    mounted() {
      this.reminderInfo = this.element || '提示内容';
      this.submitTxt = this.confirmBtn || '确定';
      this.cancelTxt = this.cancelBtn || '取消';
      this.reminderTitle = this.titleTxt || '提示';
      this.$emit('success');
    },
    methods: {
      changeToast(mes) {
        //动态改变提示信息
        // this.$refs.dl.changeToast('aaaa');
        if (mes) {
          this.reminderInfo = mes;
        }
      },
      callback() {
        /*点击确定*/
        this.hide();
        this.$emit('confirm'); /*组件调用方法： @confirm='function'*/
      },
      cancel(){
        this.hide();
        this.$emit('cancel'); /*组件调用方法： @cancel='function'*/
      },
      show(){
        this.modalClass = 'modal-show';
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      dialogShow() {
        /*显示弹窗*/
        this.show();
      }
    },
    destroyed() {
      this.hide();
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/animate.css";
  #box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
  }
  #content{
    width: 550px;margin-top: -120px;margin-left: -275px;left: 50%;padding: 35px 10px;padding-top: 0;top:40%;
    overflow:hidden;background: #fff;.borderRadius;position: absolute;padding-bottom: 38px;
    >.close{
      text-align: right;
      button{
        padding: 11px;background: none;color: rgba(0,0,0,.45);transition:color 0.2s;
        &:hover{
          color: #262626;
        }
        svg{
          width: 22px;height: 22px;
        }
      }
    }
    >.p1{
      text-align: center;
      img{
        width: 52px;height: 52px;
      }
    }
    >.p2{
      text-align: center;color: #262626;font-size: 20px;padding-top: 26px;padding-bottom: 26px;
    }
    >.btns{
      text-align: center;font-size: 0;padding-top: 30px;
      button{
        width: 130px;height: 38px;line-height: 38px;background: #EBEAEA;color: #262626;font-size: 16px;.borderRadius;
      }
      #confirm{
        .submit;width: 130px;height: 38px;line-height: 38px;text-align: center;font-size: 16px;margin-right: 27px;
      }
    }
  }
</style>
